<div class="container_wrapper customer_login_default" id="customer_login">
    <div class="mo-card-content">
        <div class="mo-header mo-header-account">
            <div class="header-title">
                <span>{{lang.customers.login.title}}</span>
            </div>
            <div class="header-divider"></div>
        </div>

        <form class="mo-form" id="login-form">
            <div class="mo-form-item" name="email">
                <div class="mo-form-item-value">
                    <input class="mo-form-input" name='email'  placeholder="{{lang.customers.login.email_placeholder}}" type="text" />
                </div>
            </div>
            
            <div class="mo-form-item" name="password">
                <div class="mo-form-item-value">
                    <input class="mo-form-input" name='password' autocomplete placeholder="{{lang.customers.login.password_placeholder}}" type="password" />
                </div>
            </div>
            <div class="mo-form-item">
                <div class="mo-form-item-value">
                    <div class="main_btn form_btn" id="confirm">{{lang.customers.login.confirm}}</div>
                </div>
                <div style="display: flex;justify-content: space-between;padding:30px 0 20px 0">
                    <a href="{{routes.account_resetpassword_url}}{% if checkout_url %}?checkout_url={{checkout_url ｜ url_encode}}{% endif %}" class="mo-btn-reset">{{lang.customers.login.reset_password}}</a>
                    <a href="{{routes.account_register_url}}{% if checkout_url %}?checkout_url={{checkout_url ｜ url_encode}}{% endif %}" style="margin-top:0" class="mo-btn-reset">{{lang.customers.login.create_account}}</a>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    (function () {
        const rules = {
            email: [{ required: true, message: "{{lang.customers.login.rule_email_placeholder}}" },{
                validator:function(value, rules,callback){
                    var emailPat=/^(.+)@(.+)$/;
                    var matchArray=value.match(emailPat);
                    if(!matchArray){
                        return callback("The Email is invalid");
                    }
                }
            }],
            password: [{ required: true, message: "{{lang.customers.login.rule_password_placeholder}}" },{
                validator:function(value, rules,callback){
                    if(value.length>15 || value.length<6){
                        return callback("The password's length should be between 6-15");
                    }
                }
            }]
        };
        const form = moi.form("#login-form", rules);
        const checkoutUrl =  moi.getUrlParam('checkout_url') || "{{checkout_url}}" || '{{routes.account_url}}';
        $("#confirm").click(function () {
            if (form.allVerify()) {
                //显示加载
                const load = moi.nodeShowLoading(this);
                const params = moi.paramsValueString(form.allValue());
                moi.ajax({
                    url: "/account/login",
                    type: "post",
                    data: JSON.stringify(params),
                    complete: function () {
                       load.close();
                    },
                    success: function (data) {
                        //错误提示
                        if (!data.code) {
                            callback_login();
                            // 设置token
                            moi.message({ content: '{{ lang.customers.login.login_successful }}',onClose(){
                                moi.setCookie('Token',data.data.token,'d2');
                                moi.href(checkoutUrl);
                            }});

                            return    
                        }
                        if(data.code == 302){
                            moi.href(data.url);
                            return
                        }

                        if(data.code == 400){
                            form.showError(0,data.msg )
                            return
                        }
                        if(data.code == 401){
                            form.showError(1,data.msg )
                            return
                        }
                        return moi.alert({ title: data.msg });

                        
                        
                    }
                });
            }
        });
    })();
</script>
